29. august 2025Norsk

Lås opp kraften i JavaScript Async Generator Helpers for effektiv opprettelse, transformasjon og håndtering av strømmer. Utforsk praktiske eksempler og reelle bruksområder for å bygge robuste asynkrone applikasjoner.

JavaScript Async Generator Helpers: Mestring av strømopprettelse og -håndtering

Asynkron programmering i JavaScript har utviklet seg betydelig gjennom årene. Med introduksjonen av asynkrone generatorer og asynkrone iteratorer fikk utviklere kraftige verktøy for å håndtere strømmer av asynkrone data. Nå forbedrer JavaScript Async Generator Helpers disse mulighetene ytterligere, og gir en mer strømlinjeformet og uttrykksfull måte å opprette, transformere og håndtere asynkrone datastrømmer på. Denne guiden utforsker det grunnleggende i Async Generator Helpers, går i dybden på funksjonaliteten deres, og demonstrerer praktisk bruk med tydelige eksempler.

Forståelse av asynkrone generatorer og iteratorer

Før vi dykker ned i Async Generator Helpers, er det avgjørende å forstå de underliggende konseptene for asynkrone generatorer og asynkrone iteratorer.

Asynkrone generatorer

En asynkron generator er en funksjon som kan pauses og gjenopptas, og som yielder verdier asynkront. Den lar deg generere en sekvens av verdier over tid, uten å blokkere hovedtråden. Asynkrone generatorer defineres med syntaksen async function*.

Eksempel:


async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 500)); // Simuler asynkron operasjon
    yield i;
  }
}

// Bruk
const sequence = generateSequence(1, 5);

Asynkrone iteratorer

En asynkron iterator er et objekt som tilbyr en next()-metode, som returnerer et promise som resolver til et objekt som inneholder den neste verdien i sekvensen og en done-egenskap som indikerer om sekvensen er fullført. Asynkrone iteratorer konsumeres ved hjelp av for await...of-løkker.

Eksempel:


async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 500));
    yield i;
  }
}

async function consumeSequence() {
  const sequence = generateSequence(1, 5);
  for await (const value of sequence) {
    console.log(value);
  }
}

consumeSequence();

Introduksjon til Async Generator Helpers

Async Generator Helpers er et sett med metoder som utvider funksjonaliteten til prototypene for asynkrone generatorer. De gir praktiske måter å manipulere asynkrone datastrømmer på, noe som gjør koden mer lesbar og vedlikeholdbar. Disse hjelperne opererer latent (lazily), noe som betyr at de bare behandler data når det er nødvendig, noe som kan forbedre ytelsen.

Følgende Async Generator Helpers er vanligvis tilgjengelige (avhengig av JavaScript-miljøet og polyfills):

map
filter
take
drop
flatMap
reduce
toArray
forEach

Detaljert utforskning av Async Generator Helpers

1. `map()`

map()-hjelperen transformerer hver verdi i den asynkrone sekvensen ved å anvende en gitt funksjon. Den returnerer en ny asynkron generator som yielder de transformerte verdiene.

Syntaks:


asyncGenerator.map(callback)

Eksempel: Konverterer en strøm av tall til deres kvadrater.


async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const squares = numbers.map(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100)); // Simuler asynkron operasjon
    return num * num;
  });

  for await (const square of squares) {
    console.log(square);
  }
}

processNumbers();

Reelt bruksområde: Tenk deg at du henter brukerdata fra flere API-er og må transformere dataene til et konsistent format. map() kan brukes til å anvende en transformasjonsfunksjon på hvert brukerobjekt asynkront.


async function* fetchUsersFromMultipleAPIs(apiEndpoints) {
  for (const endpoint of apiEndpoints) {
    const response = await fetch(endpoint);
    const data = await response.json();
    for (const user of data) {
      yield user;
    }
  }
}

async function processUsers() {
  const apiEndpoints = [
    'https://api.example.com/users1',
    'https://api.example.com/users2'
  ];

  const users = fetchUsersFromMultipleAPIs(apiEndpoints);

  const normalizedUsers = users.map(async (user) => {
    // Normaliser brukerdataformat
    return {
      id: user.userId || user.id,
      name: user.fullName || user.name,
      email: user.emailAddress || user.email
    };
  });

  for await (const normalizedUser of normalizedUsers) {
    console.log(normalizedUser);
  }
}

2. `filter()`

filter()-hjelperen oppretter en ny asynkron generator som kun yielder verdiene fra den opprinnelige sekvensen som oppfyller en gitt betingelse. Den lar deg selektivt inkludere verdier i den resulterende strømmen.

Syntaks:


asyncGenerator.filter(callback)

Eksempel: Filtrerer en strøm av tall for å bare inkludere partall.


async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 10);
  const evenNumbers = numbers.filter(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    return num % 2 === 0;
  });

  for await (const evenNumber of evenNumbers) {
    console.log(evenNumber);
  }
}

processNumbers();

Reelt bruksområde: Behandle en strøm av logginnføringer og filtrere ut innføringer basert på alvorlighetsgrad. For eksempel, å kun behandle feil og advarsler.


async function* readLogFile(filePath) {
  // Simuler lesing av en loggfil linje for linje asynkront
  const logEntries = [
    { timestamp: '...', level: 'INFO', message: '...' },
    { timestamp: '...', level: 'ERROR', message: '...' },
    { timestamp: '...', level: 'WARNING', message: '...' },
    { timestamp: '...', level: 'INFO', message: '...' },
    { timestamp: '...', level: 'ERROR', message: '...' }
  ];

  for (const entry of logEntries) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield entry;
  }
}

async function processLogs() {
  const logEntries = readLogFile('path/to/log/file.log');
  const errorAndWarningLogs = logEntries.filter(async (entry) => {
    return entry.level === 'ERROR' || entry.level === 'WARNING';
  });

  for await (const log of errorAndWarningLogs) {
    console.log(log);
  }
}

3. `take()`

take()-hjelperen oppretter en ny asynkron generator som kun yielder de første n verdiene fra den opprinnelige sekvensen. Den er nyttig for å begrense antall elementer som behandles fra en potensielt uendelig eller veldig stor strøm.

Syntaks:


asyncGenerator.take(n)

Eksempel: Henter de 3 første tallene fra en strøm av tall.


async function* generateNumbers(start) {
  let i = start;
  while (true) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i++;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1);
  const firstThree = numbers.take(3);

  for await (const num of firstThree) {
    console.log(num);
  }
}

processNumbers();

Reelt bruksområde: Viser de 5 øverste søkeresultatene fra et asynkront søke-API.


async function* search(query) {
  // Simuler henting av søkeresultater fra et API
  const results = [
    { title: 'Result 1', url: '...' },
    { title: 'Result 2', url: '...' },
    { title: 'Result 3', url: '...' },
    { title: 'Result 4', url: '...' },
    { title: 'Result 5', url: '...' },
    { title: 'Result 6', url: '...' }
  ];

  for (const result of results) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield result;
  }
}

async function displayTopSearchResults(query) {
  const searchResults = search(query);
  const top5Results = searchResults.take(5);

  for await (const result of top5Results) {
    console.log(result);
  }
}

4. `drop()`

drop()-hjelperen oppretter en ny asynkron generator som hopper over de første n verdiene fra den opprinnelige sekvensen og yielder de resterende verdiene. Den er det motsatte av take() og er nyttig for å ignorere de innledende delene av en strøm.

Syntaks:


asyncGenerator.drop(n)

Eksempel: Hopper over de 2 første tallene fra en strøm av tall.


async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const remainingNumbers = numbers.drop(2);

  for await (const num of remainingNumbers) {
    console.log(num);
  }
}

processNumbers();

Reelt bruksområde: Paginering gjennom et stort datasett hentet fra et API, der man hopper over resultatene som allerede er vist.


async function* fetchData(url, pageSize, pageNumber) {
  const offset = (pageNumber - 1) * pageSize;
  // Simuler henting av data med offset
  const data = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' },
    { id: 5, name: 'Item 5' },
    { id: 6, name: 'Item 6' },
    { id: 7, name: 'Item 7' },
    { id: 8, name: 'Item 8' }
  ];

  const pageData = data.slice(offset, offset + pageSize);

  for (const item of pageData) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield item;
  }
}

async function displayPage(pageNumber) {
  const pageSize = 3;
  const allData = fetchData('api/data', pageSize, pageNumber);
  const page = allData.drop((pageNumber - 1) * pageSize);  // hopp over elementer fra forrige sider

  const results = page.take(pageSize);


  for await (const item of results) {
    console.log(item);
  }
}

// Eksempel på bruk
displayPage(2);

5. `flatMap()`

flatMap()-hjelperen transformerer hver verdi i den asynkrone sekvensen ved å anvende en funksjon som returnerer en asynkron iterable. Deretter flater den ut den resulterende asynkrone iterablen til en enkelt asynkron generator. Dette er nyttig for å transformere hver verdi til en strøm av verdier og deretter kombinere disse strømmene.

Syntaks:


asyncGenerator.flatMap(callback)

Eksempel: Transformerer en strøm av setninger til en strøm av ord.


async function* generateSentences() {
  const sentences = [
    'Dette er den første setningen.',
    'Dette er den andre setningen.',
    'Dette er den tredje setningen.'
  ];

  for (const sentence of sentences) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield sentence;
  }
}

async function* stringToWords(sentence) {
    const words = sentence.split(' ');
    for (const word of words) {
        await new Promise(resolve => setTimeout(resolve, 50));
        yield word;
    }
}

async function processSentences() {
  const sentences = generateSentences();
  const words = sentences.flatMap(async (sentence) => {
      return stringToWords(sentence);
  });

  for await (const word of words) {
    console.log(word);
  }
}

processSentences();

Reelt bruksområde: Henter kommentarer for flere blogginnlegg og kombinerer dem til en enkelt strøm for behandling.


async function* fetchBlogPostIds() {
  const blogPostIds = [1, 2, 3]; // Simuler henting av blogginnlegg-IDer fra et API
  for (const id of blogPostIds) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield id;
  }
}

async function* fetchCommentsForPost(postId) {
  // Simuler henting av kommentarer for et blogginnlegg fra et API
  const comments = [
    { postId: postId, text: `Kommentar 1 for innlegg ${postId}` },
    { postId: postId, text: `Kommentar 2 for innlegg ${postId}` }
  ];
  for (const comment of comments) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield comment;
  }
}

async function processComments() {
  const postIds = fetchBlogPostIds();
  const allComments = postIds.flatMap(async (postId) => {
    return fetchCommentsForPost(postId);
  });

  for await (const comment of allComments) {
    console.log(comment);
  }
}

6. `reduce()`

reduce()-hjelperen anvender en funksjon mot en akkumulator og hver verdi i den asynkrone generatoren (fra venstre mot høyre) for å redusere den til en enkelt verdi. Dette er nyttig for å aggregere data fra en asynkron strøm.

Syntaks:


asyncGenerator.reduce(callback, initialValue)

Eksempel: Beregner summen av tall i en strøm.


async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const sum = await numbers.reduce(async (accumulator, num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    return accumulator + num;
  }, 0);

  console.log('Sum:', sum);
}

processNumbers();

Reelt bruksområde: Beregner gjennomsnittlig responstid for en serie med API-kall.


async function* fetchResponseTimes(apiEndpoints) {
  for (const endpoint of apiEndpoints) {
    const startTime = Date.now();
    try {
      await fetch(endpoint);
      const endTime = Date.now();
      const responseTime = endTime - startTime;
      await new Promise(resolve => setTimeout(resolve, 50));
      yield responseTime;
    } catch (error) {
      console.error(`Feil ved henting fra ${endpoint}: ${error}`);
      yield 0; // Eller håndter feilen på en passende måte
    }
  }
}

async function calculateAverageResponseTime() {
  const apiEndpoints = [
    'https://api.example.com/endpoint1',
    'https://api.example.com/endpoint2',
    'https://api.example.com/endpoint3'
  ];
  const responseTimes = fetchResponseTimes(apiEndpoints);

  let count = 0;
  const sum = await responseTimes.reduce(async (accumulator, time) => {
    count++;
    return accumulator + time;
  }, 0);

  const average = count > 0 ? sum / count : 0;
  console.log(`Gjennomsnittlig responstid: ${average} ms`);
}

7. `toArray()`

toArray()-hjelperen konsumerer den asynkrone generatoren og returnerer et promise som resolver til en array som inneholder alle verdiene som er yieldet av generatoren. Dette er nyttig når du trenger å samle alle verdiene fra strømmen i en enkelt array for videre behandling.

Syntaks:


asyncGenerator.toArray()

Eksempel: Samler tall fra en strøm inn i en array.


async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const numberArray = await numbers.toArray();

  console.log('Tall-array:', numberArray);
}

processNumbers();

Reelt bruksområde: Samler alle elementer fra et paginert API inn i en enkelt array for klientside-filtrering eller sortering.


async function* fetchAllItems(apiEndpoint) {
    let pageNumber = 1;
    const pageSize = 100;  // Juster basert på APIets pagineringsgrenser

    while (true) {
        const url = `${apiEndpoint}?page=${pageNumber}&pageSize=${pageSize}`;
        const response = await fetch(url);
        const data = await response.json();

        if (!data || data.length === 0) {
            break; // Ikke mer data
        }

        for (const item of data) {
            await new Promise(resolve => setTimeout(resolve, 50));
            yield item;
        }

        pageNumber++;
    }
}

async function processAllItems() {
    const apiEndpoint = 'https://api.example.com/items';
    const allItems = fetchAllItems(apiEndpoint);
    const itemsArray = await allItems.toArray();

    console.log(`Hentet ${itemsArray.length} elementer.`);
    // Videre behandling kan utføres på `itemsArray`
}

8. `forEach()`

forEach()-hjelperen utfører en gitt funksjon én gang for hver verdi i den asynkrone generatoren. I motsetning til andre hjelpere, returnerer ikke forEach() en ny asynkron generator; den brukes til å utføre sideeffekter for hver verdi.

Syntaks:


asyncGenerator.forEach(callback)

Eksempel: Logger hvert tall i en strøm til konsollen.


async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  await numbers.forEach(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log('Tall:', num);
  });
}

processNumbers();

Reelt bruksområde: Sender sanntidsoppdateringer til et brukergrensesnitt ettersom data behandles fra en strøm.


async function* fetchRealTimeData(dataSource) {
    //Simuler henting av sanntidsdata (f.eks. aksjekurser).
    const dataStream = [
      { timestamp: new Date(), price: 100 },
      { timestamp: new Date(), price: 101 },
      { timestamp: new Date(), price: 102 }
    ];
    for (const dataPoint of dataStream) {
      await new Promise(resolve => setTimeout(resolve, 500));
      yield dataPoint;
    }
}

async function updateUI() {
  const realTimeData = fetchRealTimeData('stock-api');
  await realTimeData.forEach(async (data) => {
    //Simuler oppdatering av UI
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log(`Oppdaterer UI med data: ${JSON.stringify(data)}`);
    // Kode for å faktisk oppdatere UI ville vært her.
  });
}

Kombinering av Async Generator Helpers for komplekse datastrømmer

Den virkelige kraften til Async Generator Helpers kommer fra deres evne til å bli kjedet sammen for å skape komplekse datastrømmer. Dette lar deg utføre flere transformasjoner og operasjoner på en asynkron strøm på en konsis og lesbar måte.

Eksempel: Filtrerer en strøm av tall for å bare inkludere partall, deretter kvadrerer dem, og til slutt henter de 3 første resultatene.


async function* generateNumbers(start) {
  let i = start;
  while (true) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i++;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1);

  const processedNumbers = numbers
    .filter(async (num) => num % 2 === 0)
    .map(async (num) => num * num)
    .take(3);

  for await (const num of processedNumbers) {
    console.log(num);
  }
}

processNumbers();

Reelt bruksområde: Henter brukerdata, filtrerer brukere basert på deres lokasjon, transformerer dataene deres til å bare inkludere relevante felt, og viser deretter de 10 første brukerne på et kart.


async function* fetchUsers() {
  // Simuler henting av brukere fra en database eller et API
  const users = [
    { id: 1, name: 'John Doe', location: 'New York', email: 'john.doe@example.com' },
    { id: 2, name: 'Jane Smith', location: 'London', email: 'jane.smith@example.com' },
    { id: 3, name: 'Ken Tan', location: 'Singapore', email: 'ken.tan@example.com' },
    { id: 4, name: 'Alice Jones', location: 'New York', email: 'alice.jones@example.com' },
    { id: 5, name: 'Bob Williams', location: 'London', email: 'bob.williams@example.com' },
    { id: 6, name: 'Siti Rahman', location: 'Singapore', email: 'siti.rahman@example.com' },
    { id: 7, name: 'Ahmed Khan', location: 'Dubai', email: 'ahmed.khan@example.com' },
    { id: 8, name: 'Maria Garcia', location: 'Madrid', email: 'maria.garcia@example.com' },
    { id: 9, name: 'Li Wei', location: 'Shanghai', email: 'li.wei@example.com' },
    { id: 10, name: 'Hans Müller', location: 'Berlin', email: 'hans.muller@example.com' },
    { id: 11, name: 'Emily Chen', location: 'Sydney', email: 'emily.chen@example.com' }
  ];

  for (const user of users) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield user;
  }
}

async function displayUsersOnMap(location, maxUsers) {
  const users = fetchUsers();

  const usersForMap = users
    .filter(async (user) => user.location === location)
    .map(async (user) => ({
      id: user.id,
      name: user.name,
      location: user.location
    }))
    .take(maxUsers);

  console.log(`Viser opptil ${maxUsers} brukere fra ${location} på kartet:`);
  for await (const user of usersForMap) {
    console.log(user);
  }
}

// Brukseksempler:
displayUsersOnMap('New York', 2);
displayUsersOnMap('London', 5);

Polyfills og nettleserstøtte

Støtte for Async Generator Helpers kan variere avhengig av JavaScript-miljøet. Hvis du trenger å støtte eldre nettlesere eller miljøer, kan det hende du må bruke polyfills. En polyfill gir den manglende funksjonaliteten ved å implementere den i JavaScript. Flere polyfill-biblioteker er tilgjengelige for Async Generator Helpers, som for eksempel core-js.

Eksempel med core-js:


// Importer nødvendige polyfills
require('core-js/features/async-iterator/map');
require('core-js/features/async-iterator/filter');
// ... importer andre nødvendige hjelpere

Feilhåndtering

Når man jobber med asynkrone operasjoner, er det avgjørende å håndtere feil på en skikkelig måte. Med Async Generator Helpers kan feilhåndtering gjøres ved hjelp av try...catch-blokker i de asynkrone funksjonene som brukes i hjelperne.

Eksempel: Håndtering av feil ved henting av data i en map()-operasjon.


async function* fetchData(urls) {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP-feil! status: ${response.status}`);
      }
      const data = await response.json();
      yield data;
    } catch (error) {
      console.error(`Feil ved henting av data fra ${url}: ${error}`);
      yield null; // Eller håndter feilen på en passende måte, f.eks. ved å yielde et feilobjekt
    }
  }
}

async function processData() {
  const urls = [
    'https://api.example.com/data1',
    'https://api.example.com/data2',
    'https://api.example.com/data3'
  ];

  const dataStream = fetchData(urls);

  const processedData = dataStream.map(async (data) => {
    if (data === null) {
      return null; // Propager feilen
    }
    // Behandle dataene
    return data;
  });

  for await (const item of processedData) {
    if (item === null) {
      console.log('Hopper over element på grunn av feil');
      continue;
    }
    console.log('Behandlet element:', item);
  }
}

processData();

Beste praksis og hensyn

Lat evaluering: Async Generator Helpers blir evaluert latent, noe som betyr at de kun behandler data når det blir forespurt. Dette kan forbedre ytelsen, spesielt når man jobber med store datasett.
Feilhåndtering: Håndter alltid feil på en skikkelig måte i de asynkrone funksjonene som brukes i hjelperne.
Polyfills: Bruk polyfills når det er nødvendig for å støtte eldre nettlesere eller miljøer.
Lesbarhet: Bruk beskrivende variabelnavn og kommentarer for å gjøre koden din mer lesbar og vedlikeholdbar.
Ytelse: Vær oppmerksom på ytelseskonsekvensene av å kjede flere hjelpere sammen. Selv om lat evaluering hjelper, kan overdreven kjedekobling fortsatt medføre ekstra belastning.

Konklusjon

JavaScript Async Generator Helpers gir en kraftig og elegant måte å opprette, transformere og håndtere asynkrone datastrømmer på. Ved å utnytte disse hjelperne kan utviklere skrive mer konsis, lesbar og vedlikeholdbar kode for håndtering av komplekse asynkrone operasjoner. Å forstå det grunnleggende i asynkrone generatorer og iteratorer, sammen med funksjonaliteten til hver hjelper, er avgjørende for å effektivt kunne bruke disse verktøyene i virkelige applikasjoner. Enten du bygger datastrømmer, behandler sanntidsdata eller håndterer asynkrone API-svar, kan Async Generator Helpers betydelig forenkle koden din og forbedre dens generelle effektivitet.